<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="">

    <!-- ajax 请求  -->
    <!-- script 创建一个链接  没有创建XMLHTTPRequest  -->
    <!-- 当前接口 php文件 运行在服务器  一般返回数据 (text/html/json) 这个返回JSOn 数据 -->
    <!--  type="text/javascript" 默认值  默认按照JS 语法解析  JOSN=>Js  -->
    <!-- <script type="text/javascript" src="http://localhost/php2107/jsonp/php/01_getAllGrade.php"></script> -->

</head>
<body>
    <img src="http://localhost/php2107/demo/imgs/react.png" width="300" height="300" alt="">
    <script>
        
        // 同源和跨域
        // jsonp 
        // 原理 因为 引入的资源(img,css,js) 这些属于静态资源  不受同源策略的限制
        // (img , link , script )  src 是不受同源策略的影响  

        // jsonp 动态创建一个 script 利用src不受同源策略的影响   去请其他服务器的接口 拿到数据 
        // 前端  提前声明一个函数
        // 服务端 : 执行前端提供的函数 写入服务器数据   (调用函数 传递数据)
        
        // 声明函数  调用函数 
        // 注意:
        // 1. jsonp 根本不是一个ajax 请求  没有创建XMLHTTPRequest
        // 2. 只能已 类似 get请求的方式 不能走 post  (请求速度快,代码简单 ) 

        // 动态的回调函数 
        function heihei(data){
            console.log(data)
        }

    </script>
    <!-- 跨域接口 传递一个函数   -->
    <!-- fun() 函数  JS=>按照JS语法解析  => 函数调用  -->
    <script src="http://localhost/php2107/jsonp/php/03_getAllGradeCallbackFn.php?cb=heihei"></script>

</body>
</html>